<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex md10 xs12 wrap>
        <v-layout row wrap align-content-start>
          <v-flex md1 sm3 xs3 class="mx-2">
            <v-text-field
              mask="######"
              name="lftid"
              label="玩家ID"
              v-model="queryForm.lftid"
              counter="6"
              type="number"
              maxlength="6"
            ></v-text-field>
          </v-flex>

          <v-flex md1 sm3 xs3 class="mx-2">
            <v-text-field name="nickname" label="玩家昵称" v-model="queryForm.nickname"></v-text-field>
          </v-flex>

          <v-flex md3 sm4 xs8 class="mt-2 date-wrapper">
            <!-- 按时间查询 -->
            <v-menu offset-y>
              <v-btn depressed slot="activator">
                <v-icon>date_range</v-icon>
                <span>选择起始日期</span>
              </v-btn>
              <v-date-picker
                min="2017-05-14"
                :max="currentDate"
                :first-day-of-week="0"
                locale="zh-cn"
                v-model="queryForm.fromTime"
              ></v-date-picker>
            </v-menu>
            <span class="date-text">{{queryForm.fromTime}}</span>
          </v-flex>
          <v-flex md3 sm4 xs8 class="mt-2 date-wrapper">
            <!-- 按时间查询 -->
            <v-menu offset-y>
              <v-btn depressed slot="activator">
                <v-icon>date_range</v-icon>
                <span>选择结束日期</span>
              </v-btn>
              <v-date-picker
                min="2017-05-14"
                :max="currentDate"
                :first-day-of-week="0"
                locale="zh-cn"
                v-model="queryForm.toTime"
              ></v-date-picker>
            </v-menu>
            <span class="date-text">{{queryForm.toTime}}</span>
          </v-flex>
          <v-flex md2 sm4 xs5 class="mx-2">
            <v-btn icon @click="refresh"  class="mt-2">
              <v-icon color="red">backspace</v-icon>
            </v-btn>
            <v-btn @click="search" dark color="blue" class="mt-2">
              <v-icon>search</v-icon>
              <span class="pl-2 subheading">搜索</span>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-flex>

      <v-flex md12 class="chip-selector">
        <v-chip
          @click="chipClicked(item)"
          v-for="item of chipItems"
          :key="item.name"
          outline
          :color="chipSelected === item.value ? 'teal':'grey'"
          text-color="black"
        >
          <v-avatar
            class="white--text subheading"
            :class="chipSelected === item.value ? 'teal':'grey'"
          >
            <v-icon v-if="chipSelected === item.value">check</v-icon>
          </v-avatar>
          <span class="subheading">{{item.name}}</span>
        </v-chip>
        <!-- <span class="title">人数：{{extraTr.totalCount}}</span> -->
      </v-flex>
      <v-flex row md12 justify-center xs12 class="overflow-table">
        <div class="table-container pos-abs">
          <v-card class="custom-table-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
              <thead>
                <tr>
                  <th v-for="(item, i) of headers" :key="i">
                    <div>{{item.text}}</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="datatable__progress" v-if="showProgress">
                  <th :colspan="headers.length" class="column">
                    <div class="progress-linear" style="height: 5px;">
                      <div
                        class="progress-linear__background teal"
                        style="height: 5px; opacity: 0.3; width: 100%;"
                      ></div>
                      <div class="progress-linear__bar">
                        <div
                          class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                        >
                          <div class="progress-linear__bar__indeterminate long teal"></div>
                          <div class="progress-linear__bar__indeterminate short teal"></div>
                        </div>
                      </div>
                    </div>
                  </th>
                </tr>
                <tr v-for="(item, i) of tableData" :key="i">
                  <td>{{item.lftid}}</td>
                  <td class="text-xs-center">
                    <v-avatar size="36">
                      <img :src="item.headUrl" alt>
                    </v-avatar>
                  </td>
                  <td>{{item.nickname}}</td>
                  <td>{{item.totalCount}}</td>
                  <td>{{item.usedCount}}</td>
                  <td>{{item.dusedCount}}</td>
                  <td :class="item.share == 0 ? 'red--text' : 'blue--text'">+{{item.share}}</td>
                  <td :class="item.inviter == 0 ? 'red--text' : 'blue--text'">+{{item.inviter}}</td>
                  <td :class="item.buy == 0 ? 'red--text' : 'blue--text'">+{{item.buy}}</td>
                  <td :class="item.consum == 0 ? 'red--text' : 'blue--text'">+{{item.consum}}</td>
                  <td
                    :class="item.finishGame == 0 ? 'red--text' : 'blue--text'"
                  >+{{item.finishGame}}</td>
                  <td
                    :class="item.update <= 0 ? 'red--text' : 'blue--text'"
                  >{{item.update >= 0 ? '+' : ''}}{{item.update}}</td>
                  <td width="20%">
                    <v-btn
                      flat
                      round
                      dark
                      color="green darken-1"
                      class="mx-1"
                      @click="editEggList(item)"
                    >
                      <span class="mx-1">修改</span>
                      <v-icon color="green darken-1">edit</v-icon>
                    </v-btn>
                    <v-btn
                      flat
                      round
                      dark
                      color="indigo darken-1"
                      class="mx-1"
                      @click="gotoEggDetail(item)"
                    >
                      <span class="mx-1">详情</span>
                      <v-icon color="indigo darken-1">more</v-icon>
                    </v-btn>
                  </td>
                </tr>

                <tr v-if="tableData.length > 0" class="sum-data">
                  <td></td>
                  <td></td>
                  <td>合计：</td>
                  <td>{{extraTr.totals}}</td>
                  <td>{{extraTr.usedTotals}}</td>
                  <td>{{extraTr.duseTotals}}</td>
                  <td
                    :class="extraTr.shareTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.shareTotals}}</td>
                  <td
                    :class="extraTr.inviterTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.inviterTotals}}</td>
                  <td
                    :class="extraTr.buyTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.buyTotals}}</td>
                  <td
                    :class="extraTr.consumTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.consumTotals}}</td>
                  <td
                    :class="extraTr.finishTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.finishTotals}}</td>
                  <td
                    :class="extraTr.updateTotals == 0 ? 'red--text' : 'blue--text'"
                  >+{{extraTr.updateTotals}}</td>
                  <td></td>
                </tr>

                <tr v-if="tableData.length === 0">
                  <td :colspan="headers.length" class>
                    <div  class="text-md-center">
                      <i
                        
                        aria-hidden="true"
                        class="icon yellow--text text--darken-3 material-icons"
                      >warning</i>
                      <span  class="subheading">暂无数据</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </v-card>
          <div class="text-xs-center my-2">
            <v-pagination
              @input="pageChange"
              circle
              :length="pagination.pageCount"
              :total-visible="pagination.totalVisible"
              v-model="pagination.page"
            ></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <div grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm8 md8>
                <v-text-field
                  :disabled="!allowEdit"
                  label="未使用次数"
                  type="text"
                  v-model="editedItem.dusedCount"
                ></v-text-field>
              </v-flex>
            </v-layout>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
import { egg } from "../../api/activity";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    showProgress: false,
    limit: 7,
    offset: 0,
    dialog: false,
    allowEdit: true,
    isSearch: false,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 绑定到页面的
    queryForm: {
      lftid: "",
      nickname: "",
      fromTime: "",
      toTime: ""
    },
    // 实际发送查询条件
    form: {
      fromTime: "",
      toTime: "",
      limit: 10,
      offset: 0
    },
    tableData: [],
    formTitle: "代理资料",
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "共获次数", value: "nickname", align: "center", sortable: false },

      { text: "已使用", value: "superId", align: "center", sortable: false },
      { text: "未使用", value: "superId", align: "center", sortable: false },
      {
        text: "每日登录",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "邀请好友",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "购买房钻",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "消耗房钻",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "完成游戏",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "管理员修改",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      dusedCount: ""
    },
    chipItems: [
      {
        name: "今日",
        value: 1
      },
      {
        name: "昨日",
        value: 2
      },
      {
        name: "总计",
        value: 3
      }
    ],
    chipSelected: 1,
    modal: false,
    modalText: "",
    cancelItem: null,
    showCancel: false,
    currentDate: "",
    extraTr: {
      total: 21
    }
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getEggSmashList();
    // this.initialize()
  },
  methods: {
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          total: 123000,
          used: 1,
          unused: 888,
          firstShare: 1,
          inviteFriends: "2018-4-19",
          playGame: 3655,
          buyDiamond: 1,
          consumeDiamond: 1,
          adminChange: "red"
        }
      ];
    },
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;
      this.queryForm = {
        lftid: "",
        nickname: "",
        fromTime: "",
        toTime: ""
      };
      this.pagination.page = 1;
      this.getEggSmashList();
    },
    // 获取砸蛋记录列表
    getEggSmashList() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected
      };
      this.showProgress = true;
      egg.getEggSmashList.r(qs).then(({ data }) => {
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.tableData = rankData;
            this.extraTr = $data.totalVo;
            this.pagination.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    // 按条件查询砸蛋记录
    searchEggSmashList(form) {
      this.showProgress = true;
      egg.getEggSmashList.r(form).then(({ data }) => {
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.voList;
            this.tableData = rankData;
            this.pagination.pageCount = data.data.totalRow
              ? Math.ceil(data.data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    editUnusedSmash() {
      let after = this.editedItem.dusedCount;
      let opt = {
        uid: this.editedItem.uid,
        before: this.editedItem.beforeNumber,
        after
      };
      console.log(opt);
      egg.editUnusedSmash.r(opt).then(({ data }) => {
        console.log("editUnusedSmash", data);
        if (data.result == 0) {
          this.getEggSmashList();
        }
        this.dialog = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },

    gotoEggDetail(item) {
      // this.cancelItem = item;
      this.$router.push(
        `/activity/eggdetail?uid=${item.uid}&name=${item.nickname}`
      );
    },
    editEggList(item) {
      this.editedItem = {
        dusedCount: item.dusedCount,
        uid: item.uid,
        beforeNumber: item.dusedCount
      };
      this.dialog = true;
      this.formTitle = "未使用次数修改";
    },
    search(fromPage) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm, (item, key) => {
        item ? (form[key] = item) : valid++;
      });
      if (valid == 4) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请至少选择一个查询条件"
        });
      }

      if (this.queryForm.fromTime && this.queryForm.toTime) {
        if (
          new Date(this.queryForm.fromTime).getTime() >
          new Date(this.queryForm.toTime).getTime()
        ) {
          return $Vue.$emit("toggleSnackbar", {
            text: "起始日期不能早于结束日期"
          });
        }
        form.toTime = new Date(this.queryForm.toTime + " 23:59:59").getTime();
        form.fromTime = new Date(
          this.queryForm.fromTime + " 00:00:00"
        ).getTime();
      } else if (this.queryForm.fromTime || this.queryForm.toTime) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请选择完整起止日期"
        });
      }

      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      // form.type = this.chipSelected;
      form.limit = this.limit;
      form.offset = this.offset;
      this.searchEggSmashList(form);
      this.isSearch = true;
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getEggSmashList();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.pagination.page = 1;
      this.offset = 0;
      this.queryForm = {
        lftid: "",
        nickname: "",
        fromTime: "",
        toTime: ""
      };
      this.getEggSmashList();
    },
    confirmDialog() {
      if(!Number.isNaN(Number(this.editedItem.dusedCount))) {
        this.editUnusedSmash();
      } else {
        $Vue.$emit("toggleSnackbar", {
          text: "请输入正确格式的数字"
        });
      }
    },
    confirmModal() {
      // this.cancelAgentQualify();
    }
  }
};
</script>
<style lang="less" scoped>
.date-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
    top: -8px;
  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: relative;
    top: 0;
    // right: 24px;

    .date-clear {
      position: absolute;
      right: -20px;
      top: 4px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>